<template>
  <div class="page-user">
    <div class="page-user-container">
      <Row style="padding-top:50px;">
        <i-col span="6">
          <Menu :theme="theme" :active-name="tap" @on-select="handleSelect">
            <Menu-group title="个人中心">
              <Menu-item name="course">
                <span class="iconfont icon-rizhi"></span>课程
              </Menu-item>
              <Menu-item name="review">
                <span class="iconfont icon-jiancha"></span>学习回顾
              </Menu-item>
              <Menu-item name="info">
                <span class="iconfont icon-wo"></span>个人信息
              </Menu-item>
              <Menu-item name="share">
                <span class="iconfont icon-pingtai"></span>分享
              </Menu-item>
              <Menu-item name="incharge">
                <span class="iconfont icon-hexiao"></span>充值/资金
              </Menu-item>
              <Menu-item name="card">
                <span class="iconfont icon-pingban"></span>学习卡
              </Menu-item>
            </Menu-group>
          </Menu>
        </i-col>
        <i-col span="18">
          <Tabs
            type="card"
            class="main-pane"
            :value="tap"
            @on-click="handleSelect"
            :animated="false"
          >
            <Tab-pane label="课程" name="course"> 
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="当前学习" name="current"></Tab-pane>
                <Tab-pane label="选修课程" name="elective"></Tab-pane>
                <Tab-pane label="过期课程" name="expired"></Tab-pane>
              </Tabs>
            </Tab-pane>
            <Tab-pane label="学习回顾" name="review">
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="学习记录" name="recover"></Tab-pane>
                <Tab-pane label="测试成绩" name="test"></Tab-pane>
                <Tab-pane label="考试成绩" name="exam"></Tab-pane>
                <Tab-pane label="错题回顾" name="wrong"></Tab-pane>
                <Tab-pane label="在线时间" name="online"></Tab-pane>
              </Tabs>
            </Tab-pane>
            <Tab-pane label="个人信息" name="info">
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="基本信息" name="base">
                  <div class="base_info_container">
                    <div class="info_item">
                      <div class="info_key">头像：</div>
                      <div class="info_value_box">
                        <div class="info_value" style="text-align:center">
                          <img :src="user_info.avatar" />
                        </div>
                        <div class="info_input" v-if="is_edit">
                          <Upload
                            @before-upload="beforeUpload"
                            @on-success="handleSuccess"
                            @on-error="handleError"
                            action="//jsonplaceholder.typicode.com/posts/"
                          >
                            <Button icon="ios-cloud-upload-outline">上传头像</Button>
                          </Upload>
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">姓名：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit">{{user_info.acName || "空"}}</div>
                        <div class="info_input" v-if="is_edit">
                          <Input :maxlength="10" v-model="user_info.acName" placeholder="请输入姓名" />
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">生日：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit">{{user_info.birthday || "空"}}</div>
                        <div class="info_input" v-if="is_edit">
                          <DatePicker
                            style="width:220px"
                            type="date"
                            placement="bottom-end"
                            placeholder="请选择生日"
                          ></DatePicker>
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">性别：</div>
                      <div class="info_value_box">
                        <div
                          class="info_value"
                          v-if="!is_edit"
                        >{{user_info.gender ===null ? "空" :user_info.gender}}</div>
                        <div class="info_input" v-if="is_edit">
                          <Select v-model="user_info.gender" style="width:200px">
                            <Option value="null">未知</Option>
                            <Option value="1">男</Option>
                            <Option value="0">女</Option>
                          </Select>
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">专业：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit">{{user_info.major || "空"}}</div>
                        <div class="info_input" v-if="is_edit">
                          <Select
                            :multiple="true"
                            v-model="!user_info.major ? ['null'] : user_info.major "
                            style="width:200px"
                          >
                            <Option value="null">未知</Option>
                            <Option value="1">信息技术</Option>
                            <Option value="0">数字媒体</Option>
                          </Select>
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">班级：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit">{{user_info.userClass || "空"}}</div>
                        <div class="info_input" v-if="is_edit">
                          <Select
                            :multiple="true"
                            v-model="!user_info.userClass ? ['null'] : user_info.userClass "
                            style="width:200px"
                          >
                            <Option value="null">未知</Option>
                            <Option value="1">技术一班</Option>
                            <Option value="0">技术二班</Option>
                          </Select>
                        </div>
                      </div>
                    </div>
                    <div class="info_item" style="justify-content: center;">
                      <Button type="primary" v-if="!is_edit" @click="handleEdit(true,'is_edit')">编辑</Button>
                      <Button type="primary" v-if="is_edit" @click="handleSubmit('base')">保存</Button>
                      <Button type="primary" v-if="is_edit" @click="handleEdit(false,'is_edit')">取消</Button>
                    </div>
                  </div>
                </Tab-pane>
                <Tab-pane label="联系方式" name="contact">
                  <div class="base_info_container">
                    <div class="info_item">
                      <div class="info_key">手机：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit1">{{user_info.mobile}}</div>
                        <div class="info_input" v-if="is_edit1">
                          <Input :maxlength="10" v-model="user_info.mobile" placeholder="请输入手机" />
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">微信：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit1">{{user_info.wechat || '空'}}</div>
                        <div class="info_input" v-if="is_edit1">
                          <Input :maxlength="20" v-model="user_info.wechat" placeholder="请输入微信号" />
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">QQ：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit1">{{user_info.qq || '空'}}</div>
                        <div class="info_input" v-if="is_edit1">
                          <Input :maxlength="20" v-model="user_info.qq" placeholder="请输入QQ" />
                        </div>
                      </div>
                    </div>
                    <div class="info_item">
                      <div class="info_key">邮箱：</div>
                      <div class="info_value_box">
                        <div class="info_value" v-if="!is_edit1">{{user_info.email}}</div>
                        <div class="info_input" v-if="is_edit1">
                          <Input :disabled="true" v-model="user_info.email" placeholder="请输入邮箱" />
                        </div>
                      </div>
                    </div>
                    <div class="info_item" style="justify-content: center;">
                      <Button
                        type="primary"
                        v-if="!is_edit1"
                        @click="handleEdit(true,'is_edit1')"
                      >编辑</Button>
                      <Button type="primary" v-if="is_edit1" @click="handleSubmit('contact')">保存</Button>
                      <Button
                        type="primary"
                        v-if="is_edit1"
                        @click="handleEdit(false,'is_edit1')"
                      >取消</Button>
                    </div>
                  </div>
                </Tab-pane>
                <Tab-pane label="安全管理" name="safe">
                  <div class="base_info_container">
                    <template v-if="!user_info.securityQuestion && !user_info.securityAnswer">
                      <div class="info_item">
                        <div class="info_key">密保问题：</div>
                        <div class="info_value_box">
                          <div class="info_input">
                            <Input
                              :maxlength="50"
                              v-model="user_info.securityQuestion"
                              placeholder="请输入密保问题"
                            />
                          </div>
                        </div>
                      </div>
                      <div class="info_item">
                        <div class="info_key">密保答案：</div>
                        <div class="info_value_box">
                          <div class="info_input">
                            <Input
                              :maxlength="50"
                              v-model="user_info.securityAnswer"
                              placeholder="请输入密保答案"
                            />
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="info_item" style="justify-content: center;">
                      <Button type="primary" @click="handleSubmit('security')">保存</Button>
                      <Button type="primary" @click="changePass">更改密码</Button>
                    </div>
                  </div>
                </Tab-pane>
              </Tabs>
            </Tab-pane>
            <Tab-pane label="分享" name="share">
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="分享链接" name="share_link"></Tab-pane>
                <Tab-pane label="我的朋友" name="friend"></Tab-pane>
                <Tab-pane label="收益" name="earnings"></Tab-pane>
              </Tabs>
            </Tab-pane>
            <Tab-pane label="充值/资金" name="incharge">
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="充值" name="incharge"></Tab-pane>
                <Tab-pane label="资金" name="fund"></Tab-pane>
                <Tab-pane label="卡劵" name="coupon"></Tab-pane>
                <Tab-pane label="积分" name="integral"></Tab-pane>
                <Tab-pane label="收益" name="money_earnings"></Tab-pane>
              </Tabs>
            </Tab-pane>
            <Tab-pane label="学习卡" name="card">
              <Tabs type="card" @on-click :animated="true">
                <Tab-pane label="学习卡" name="learn_card"></Tab-pane>
              </Tabs>
            </Tab-pane>
          </Tabs>
        </i-col>
      </Row>
    </div>
    <Modal v-model="is_show_modal" title="修改密码" @on-ok="ok" @on-cancel="cancel">
      <van-form @submit="onSubmit">
        <van-field
          v-model="param.old_password"
          label="原密码"
          type="password"
          placeholder="请输入原密码"
          label-align="right"
          :rules="[{ required: true, message: '原密码不能为空' }]"
        />
        <van-field
          v-model="param.new_password"
          type="password"
          label="新密码"
          placeholder="请输入新密码"
          label-align="right"
          :rules="[{ required: true, message: '新密码不能为空' },{pattern:/^[a-zA-Z0-9\S,.!@$^&*-=+`~?:;]{6,16}$/,message:'密码允许6-16位字母、数字及英文标点符'}]"
        />
        <van-field
          v-model="param._password"
          type="password"
          label="再次输入"
          placeholder="请再次输入新密码"
          label-align="right"
          :rules="[{ required: true, message: '新密码不能为空' },{pattern:password_rule,message:'两次输入的密码不一致'}]"
        />
      </van-form>
    </Modal>
  </div>
</template>

<script>
import { userInfoUpdate } from "~/api/account/user.js";
import { mapState, mapMutations } from "vuex";
export default {
  components: {},
  data() {
    return {
      theme: "light", 
      is_edit: false,
      is_edit1: false,
      is_show_modal: false,
      param: {
        old_password: "",
        new_password: "",
        _password: ""
      }
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      theme_color(state) {
        return state.theme_color;
      }
    }),
    password_rule() {
      return new RegExp(this.param.new_password);
    },
    tap() {
      return this.$route.query.action || "course";
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["UPDATE_USERINFO", "SET_IS_LOADING"]),
    handleSelect(key) {
      this.$router.push({
        path: "",
        query: {
          action: key
        }
      });
    },
    changePass() {
      this.is_show_modal = true;
    },
    handleEdit(boolean, name) {
      boolean = boolean || false;
      this[name] = boolean;
    },
    onSubmit() {},
    handleSubmit(type) {
      this.$Modal.confirm({
        title: "提示",
        content: "您确定要提交吗？",
        onOk: async () => {
          console.log(this.user_info);
          let res;
          let params;
          this.SET_IS_LOADING(true);
          if (type == "base") {
          } else if (type == "contact") {
            const { id, mobile, wechat, qq } = this.user_info;
            params = {
              id,
              mobile,
              wechat,
              qq
            };
            res = await userInfoUpdate(params);
          } else if (type == "security") {
          } else {
          }
          if (res.data.code == 200) {
            this.UPDATE_USERINFO(params);
            this.$Message.success("修改成功！");
          } else {
            this.INIT_WEB();
            this.$Message.success("修改失败！");
          }
          this.SET_IS_LOADING(false);
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    beforeUpload() {},
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleError(error, file, fileList) {
      console.log(error, file, fileList);
    },
    cancel() {
      this.is_show_modal = false;
    },
    ok() {}
  },
  created() {
    // if (!this.token || (Object.keys(this.user_info).length = 0)) {
    //   this.$router.push("/login");
    // }
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
.page-user {
  min-height: calc(100vh - 427px);
  .page-user-container {
    margin: auto;
    width: 990px;
    .base_info_container {
      .info_item {
        display: flex;
        align-items: center;
        .info_key {
          margin-right: 5px;
          width: 135px;
          font-size: 16px;
          color: #333;
          text-align: right;
        }
        .info_value_box {
          .info_value {
            font-size: 14px;
            color: #666;
            > img {
              width: 84px;
              height: 84px;
            }
          }
          // .info_input {
          // }
        }
      }
      .info_item + .info_item {
        margin-top: 20px;
      }
    }
  }
}
</style>
<style lang='scss'>
.page-user {
  .base_info_container {
    .info_item {
      button + button {
        margin-left: 12px;
      }
    }
  }
  .ivu-menu-item-group-title {
    font-size: 22px;
    color: #333;
  }
  .ivu-menu-vertical .ivu-menu-item,
  .ivu-menu-vertical .ivu-menu-submenu-title {
    display: flex;
    align-items: center;
    .iconfont {
      margin-right: 5px;
      font-size: 24px;
      color: #666;
    }
    &:hover {
      .iconfont {
        color: var(--theme-color);
      }
    }
  }
  .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
    .iconfont {
      color: var(--theme-color);
    }
  }
  .main-pane {
    > .ivu-tabs-bar {
      display: none;
    }
  }
}
</style>